<template>
  <div
    class="admin_login_div"
    :style="{backgroundImage: 'url(' + admin_login_backgroud + ')',backgroundRepeat: 'no-repeat',position: 'fixed',height: '100%',width: '100%',backgroundSize: '100% 100%',top: '0px',left: '0px'}"
  >
    <h1>{{ msg }}</h1>
    <el-row class="login_row" type="flex" justify="center">
      <el-col :span="6">
        <!-- 用户表单输入 -->
        <el-form ref="form" :model="login_form" label-width="80px">
          <el-form-item label="用户名" style="color: #000000;">
            <el-input v-model="login_form.admin_user_name"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="login_form.admin_user_pwd" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">登陆</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import admin_login_backgroud from '@/assets/images/admin_login_backgroud.jpg'

export default {
  name: 'AdminLogin',
  data() {
    return {
      msg: '众筹网管理员登陆',
      admin_login_backgroud: admin_login_backgroud,
      login_form: {
        admin_user_name: '',
        admin_user_pwd: ''
      }
    }
  },
  methods: {
    onSubmit() {
      var _this = this
      console.log('submit!')
      /* 解决post请求请求头不正确，后端接收不到参数的问题 */
      var param = new URLSearchParams()
      param.append('username', _this.login_form.admin_user_name)
      param.append('password', _this.$md5(_this.login_form.admin_user_pwd))
      //console.info(_this.$md5("123456"));
      _this.$axios
        .post('/api/login', {
          username: _this.login_form.admin_user_name,
          password: _this.$encruption(_this.login_form.admin_user_pwd)
        })
        .then(function(res) {
          var data = res.data
          // if (data.code != 0) {
          //   //用户名不存在或密码错误
          //   _this.$message.error(data.message);
          //   return;
          // }
          //将token存入session(使用vuex)
          console.info(data.data)
          _this.$store.commit('changeToken', data.data)
          //登陆成功，页面跳转
          _this.$router.push({ path: '/' })
        })
        .catch(function(error) {
          console.log(error.response)
          if (error && error.response) {
            var status = error.response.status
            var data = error.response.data
            switch (status) {
              case 401:
                _this.$message.error(data.message)
            }
          }
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
  color: #000000;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.admin_login_div {
  text-align: center;
}
</style>
